<form class="form-horizontal">

  <legend>#= label.investigation #</legend>


    <div class="control-group">
      <div class="control-label">#= label.crown # :</div>
      <div class="controls">
        <div id="crownView" class="k-widget-no-border" data-role="listview" data-bind="source: crowns" data-template="crownViewTemplate"></div>
      </div>
    </div>
    
    
    <div class="control-group">
      <div class="control-label">#= label.stem # :</div>
      <div class="controls">
        <div id="rootView" class="k-widget-no-border" data-role="listview" data-bind="source: stems" data-template="stemViewTemplate"></div>
      </div>
    </div>
    
    
    <div class="control-group">
      <div class="control-label">#= label.root # :</div>
      <div class="controls">
        <div id="rootView" class="k-widget-no-border" data-role="listview" data-bind="source: roots" data-template="rootViewTemplate"></div>
      </div>
    </div>
    

    <div class="control-group">
      <label class="control-label" for="soil">#= label.health # :</label>
      <div class="controls">
        <select id="soil" data-role="dropdownlist" data-text-field="name" data-value-field="id" data-bind="source: healths, value: healthValue, events:{ change: healthListener }" data-option-label='{ "name": "Conditie", "id": "0" }'></select>
      </div>
    </div>


    <div class="control-group">
      <label class="control-label" for="soil">#= label.qualification # :</label>
      <div class="controls">
        <select id="qualification" class="k-form-xlarge" data-role="dropdownlist" data-text-field="name_score" data-value-field="id" data-bind="source: qualifications, value: qualificationValue, events:{ change: qualificationListener }" data-option-label='{ "name_score": "Beoordeling", "id": "0" }'></select>
      </div>
    </div>






 
    

    <pre>
    {
        crownValue: [<span data-bind="text: displayCrownValue"></span>],
        stemValue: [<span data-bind="text: displayStemValue"></span>],
        rootValue: [<span data-bind="text: displayRootValue"></span>],
        healthValue: [<span data-bind="text: displayHealthValue"></span>],
        calculatedHealthValue: [<span data-bind="text: displayCalculatedHealthValue"></span>],
    }
    </pre>
    
    
    
    
    
  
  
</form>



<script type="text/x-kendo-template" id="crownViewTemplate">
    <label><input type="checkbox" data-bind="checked: crownValue, events:{ change: crownListener }, value: id" />&nbsp;<span data-bind="text: name" /></label>
</script>


<script type="text/x-kendo-template" id="stemViewTemplate">
    <label><input type="checkbox" data-bind="checked: stemValue, events:{ change: stemListener }, value: id" />&nbsp;<span data-bind="text: name" /></label>
</script>


<script type="text/x-kendo-template" id="rootViewTemplate">
    <label><input type="checkbox" data-bind="checked: rootValue, events:{ change: rootListener }, value: id" />&nbsp;<span data-bind="text: name" /></label>
</script>